<!--  -->
<template>
	<view class="luckBg">
		<view class="luckWhellBg">
			<view class="luckWhellBgMain rotateStyle" :style="{transform:`rotate(${rotateAngle}deg)`}">
				<!-- :key="item[prizeNameField]" -->
				<view class="luckWhellSector" v-for="(item, index) in renderData" :style="item.style2" :key="index">
				</view>
			</view>

			<view class="wheel-main">
				<view class="prize-list rotateStyle" :style="{transform:`rotate(${rotateAngle}deg)`}">
					<view class="prize-item" v-for='(item,index) in renderData' :style="item.style" :key="index">
						<view class="prize-name">
							{{item[prizeNameField]}}
						</view>
						<view class="prize-image" v-if="item[prizeImageField]">
							<!-- <img :src="item[prizeImageField]" style="width:45%; max-height:40px; max-height:40px;" /> -->
							<image :src="item[prizeImageField]" mode="widthFix" style="width:65%; "></image>
						</view>
					</view>
				</view>
				<!-- 		<view class="prize_point" @click="onPrizeRoll()">
					<view class="x-text-multi prize-btn">开始抽奖</view>
				</view> -->
				<image class="prize-btn" mode="widthFix" @click="onPrizeRoll()" src="@/static/lottery/lottery_btn.png">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 奖品列表字段（每个元素是字典）
			data: {
				type: Array,
				required: true,
			},
			// 奖品在元素中对应字段名称
			prizeNameField: {
				type: String,
				required: true,
			},
			// 奖品在元素中对应图片名称
			prizeImageField: {
				type: String,
				required: false,
			}
		},
		data() {
			return {
				renderData: [],
				CIRCLE_ANGLE: 360,
				BIGSIZE: 24, //字体
				angleList: [], // 记录每个奖的位置
				// gift_id: 3, //中奖ID
				// index: '', //抽中的是第几个奖品
				isRotating: false, //为了防止重复点击
				rotateAngle: 0,
			}
		},

		mounted() {
			this.formatPrizeList(this.data)
		},

		methods: {
			formatPrizeList(newVal) {
				// console.log("this.data=", newVal)
				const l = newVal.length;
				// 计算单个奖项所占的角度
				const average = this.CIRCLE_ANGLE / l; //60
				const half = average / 2; //30			  
				const rightBig = l == 2 ? '50' : '0';
				const heightBig = l <= 3 ? '100' : '50';
				const topBig = l == 3 ? '-50' : '0';
				const skewMain = l <= 2 ? 0 : -(l - 4) * 90 / l;
				// 循环计算给每个奖项添加style属性
				console.log("newVal=", newVal)
				newVal.forEach((item, i) => {
					console.log("item=", item)
					// 每个奖项旋转的位置为 当前 i * 平均值 + 平均值 / 2
					const angle = -(i * average + half);
					const bigAge = l > 2 ? i * 360 / l : '0';
					// 增加 style 这个是给每一个奖项增加的样式
					// 修改 item.style2 属性
					item.style = `-webkit-transform: rotate(${-angle}deg);
			          transform: rotate(${-angle}deg);
			          width:${100/l*2}%;  
			          margin-left: -${100/l}%;
			          font-size:${this.BIGSIZE-l}px;`;
					//这是给每一个转盘背景新增的样式
					item.style2 = `-webkit-transform: rotate(${bigAge}deg);
			          transform: rotate(${bigAge}deg) skewY(${skewMain}deg);
			          right:${rightBig*i}%;
			          height:${heightBig}%;
			          top:${topBig}%;
			          width:${l==1?100:50}%;
			          background:${item.color}
			          `

					// 记录每个奖项的角度范围
					this.angleList.push(angle);
				});

				this.renderData = newVal
				// 延迟应用样式，触发渲染树更新
				// requestAnimationFrame(() => {
				// 	this.$forceUpdate(); // 这里假设你使用的是Vue.js，可以强制重新渲染组件
				// });
				console.log("this.data=", this.data, ",newVal=", newVal)
			},

			//抽奖
			onPrizeRoll() {
				console.log("thi.prizeRoll")
				if (this.isRotating)
					return false;
				this.isRotating = true
				this.$emit("start")
				// this.gift_id = Math.floor(1 + Math.random() * this.data.length);
				// console.log(this.gift_id);
				// this.data.forEach((item, i) => {
				// 	if (item.id == this.gift_id) {
				// 		this.index = i; //判断中奖的位置
				// 	}
				// });
				// this.rotating();
			},

			// 外界使用端如果获取中奖奖品出现异常，调用 finish 将状态重置
			finish() {
				this.isRotating = false
			},

			//转盘转动角度
			rotating(giftIndex) {
				console.log("giftIndex=", giftIndex)
				// this.isRotating = true;

				// 计算角度
				let unitAngle = 360 / this.renderData.length
				this.rotateAngle = this.rotateAngle - this.rotateAngle % 360 + 8 * 360 + (360 - 360 / this.renderData
					.length * giftIndex) - unitAngle / 2;
				// 旋转结束后，允许再次触发
				setTimeout(() => {
					this.isRotating = false;
					console.log('旋转结束')
					this.$emit("finish", giftIndex)
				}, 5000 + 500);

			}
		}
	}
</script>

<style lang="scss" scoped>
	.luckBg {
		background: #ffcf49;
		width: 20rem;
		height: 20rem;
		border-radius: 50%;
		margin: 0 auto;
		padding: 5px;
	}

	.luckWhellBg,
	.luckWhellBgMain {
		background: #fff;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		position: relative;
		overflow: hidden;
	}

	.rotateStyle {
		-webkit-transition: transform 5000ms ease-in-out;
		transition: transform 5000ms ease-in-out;
	}

	.luckWhellSector {
		position: absolute;
		top: 0;
		right: 0;
		transform-origin: 0% 100%;
		border: 1px solid #facd89;
		border-right: 0;
		border-top: 0;
		box-sizing: border-box;
	}

	.luckWhellSector:nth-child(2n) {
		position: absolute;
		background: #fff3d8;
	}

	.wheel-main {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 2;

		.prize-list {
			width: 100%;
			height: 100%;
			position: relative;

			.prize-item {
				position: absolute;
				left: 50%;
				height: 50%;
				padding-top: 15px;
				box-sizing: border-box;
				text-align: center;
				transform-origin: 50% 100%;
				color: #F83C0E;

				.prize-name {
					position: relative;
					font-family: 'PingFang SC';
					font-size: 12px;
					font-weight: normal;
					color: #5A5856;
				}

				.prize-image {
					padding-top: 5px;
					display: flex;
					justify-content: center;
					max-height: 30px;
				}
			}
		}
	}

	.prize-btn {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 150rpx;
	}

	.prize_point {
		position: absolute;
		left: 50%;
		background: #ff3a60;
		width: 4rem;
		height: 4rem;
		top: 50%;
		margin-left: -2rem;
		margin-top: -2rem;
		border-radius: 50%;

		.prize-btn {
			font-size: 22px;
			text-align: center;
			color: white;
			margin-top: 2px;
		}
	}

	.prize_point::after {
		position: absolute;
		left: 50%;
		top: -1.7rem;
		width: 0;
		height: 0;
		margin-left: -1rem;
		border: 1rem solid;
		border-color: transparent transparent #ff3a60;
		content: '';
	}
</style>